<template>
	<view class="appointment-content">
		<view class="appointment-header">
			<view 
				class="appointment-header-listContent" 
				v-for="(item, index) in dateArr"
				:key="item.day"
				@tap="tapDate(index)"
				:class="{active: index === dateIndex}"
			>
				<text class="appointment-header-week">{{item.weekday}}</text>
				<text class="appointment-header-date">{{item.day}}</text>
				<view class="border-bottom"></view>
			</view>
		</view>
		
		<view class="appointment-hour-list">
			<view class="appointment-hour-list-inner">
				<view class="appointment-hour-range">
					08:00-09:00
				</view>
				<view class="appointment-hour-range2">
					余号：6
				</view>
			</view>
			<view class="appointment-hour-list-inner">
				<view class="appointment-hour-range">
					08:00-09:00
				</view>
				<view class="appointment-hour-range2">
					余号：6
				</view>
			</view>
			<view class="appointment-hour-list-inner">
				<view class="appointment-hour-range">
					08:00-09:00
				</view>
				<view class="appointment-hour-range2">
					余号：6
				</view>
			</view>
			<view class="appointment-hour-list-inner">
				<view class="appointment-hour-range">
					08:00-09:00
				</view>
				<view class="appointment-hour-range2">
					余号：6
				</view>
			</view>
		</view>
		
		<view class="selectService-service">
			<text class="selectService-service-left">服务项目</text>
			<view class="selectService-service-right" >
				<picker
					class="medical-tab0-animal-check"
					mode="selector" 
					:range="serviceArr" 
					:value="serviceArrNumber" 
					@change="bindPickerChange"
					range-key="name"		
				 >
				 <!-- {{serviceArrNumber > -1 ? `${serviceArr[serviceArrNumber]["name"]}` : "请选择"}} -->
					<view class="picker-inner">
						<text class="unSelect" v-if="serviceArrNumber === '请选择' " >
							请选择
						</text>
						<text class="selected" v-else>
							{{serviceArr[serviceArrNumber]["name"]}}
						</text>
						<image :src="`${prefix_image}/homepage/IntegralRecord/icon-right.png`" mode="aspectFill" />
					</view>
				 </picker>
			</view>
		</view>
		
		<view class="selectService-bottom">
			<view class="selectService-bottom-left">
				<text class="selectService-bottom-left-text1">预约时间：</text>
				<text class="selectService-bottom-left-text2">今天 11:00-12:00</text>
			</view>
			<view class="selectService-bottom-button" @tap="gotoServiceItems()">
				确认预约
			</view>
		</view>
	</view>
</template>

<script>
import { defineComponent, reactive, toRefs, onMounted } from "vue"
import config from '@/hooks/useConfig.js'

export default defineComponent({
	setup() {
		const { prefix_image }=config()
		
		const data = reactive({
			// 日期的切换
			dateArr: [],
			dateIndex: 0,
			
			// 服务项目
			"serviceArr": [
				{
					"name": "服务一",
					"key": 0
				},
				{
					"name": "服务二",
					"key": 1
				},
			],
			"serviceArrNumber": "请选择",
		})
		
		onMounted(() => {
			console.log(233);
			_formatDate()
		})
		
		const bindPickerChange = (e) =>{
			console.log(e)
			data.serviceArrNumber = e.target.value
		}
		
		const _formatDate = () => {
			let myDate = new Date(); //获取今天日期
			myDate.setDate(myDate.getDate() );
			let dateArray = []; 
			let dateTemp; 
			let flag = 1; 
			// console.log(myDate, "233")
			let weekday=["日", "一", "二", "三", "四", "五", "六"];
			for (let i = 0; i < 7; i++) {
				let date = myDate.getDay()
				dateTemp = (myDate.getMonth()+1)+"-"+myDate.getDate() + weekday[date];
				// console.log(dateTemp, myDate.getDate(), weekday[date])
				dateArray.push({
					"weekday": i===0 ? "今日" : weekday[date],
					"day": myDate.getDate(),
					
				});
				myDate.setDate(myDate.getDate() + flag); 
			}
			
			data.dateArr = dateArray
		}
		
		// 跳转服务项目
		const gotoServiceItems = () => {
			uni.navigateTo({
				url:'/pages/serviceItems/index?isOnline=true',
			})
		}
		
		// 切换时间
		const tapDate = (index) => {
			// console.log(e)
			data.dateIndex = index;
			
		}
		
		return {
			...toRefs(data),
			tapDate,
			bindPickerChange,
			gotoServiceItems,
			prefix_image
		}
	}
})
</script>

<style lang="stylus" scoped>
	.appointment-content{
		background: #F6F6F7;
		overflow: hidden;
		height: 100vh;
		.appointment-header{
			display: flex;
			padding: 36rpx 32rpx 0rpx 32rpx;
			border-bottom: 1rpx solid rgba(0, 0, 0, 0.1);
			height: 152rpx;
			box-sizing: border-box;
			background-color: #fff;
			
			.appointment-header-listContent{
				display:flex;
				flex-direction: column;
				text-align: center;
				padding-left: 19rpx;
				padding-right: 19rpx;
				width: 60rpx;
				align-items: center;
				.appointment-header-week{
					font-size: 24rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #B2B2B2;
					padding-bottom: 20rpx;
					height: 34rpx;
				}
				.appointment-header-date{
					font-size: 30rpx;
					// font-family: GenJyuuGothic-P-Bold, GenJyuuGothic-P;
					font-weight: bold;
					color: #B2B2B2;
				}
			}
			.active{
				.appointment-header-week{
					font-size: 24rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
					
				}
				.appointment-header-date{
					margin-bottom: 6rpx;
				}
				.border-bottom{
					width: 18rpx;
					height: 6rpx;
					background: #333333;
					border-radius: 3rpx;
			
				}
			}
			.appointment-header-listContent:first-of-type{
				padding-left: 0rpx;
			}
		}
		.appointment-hour-list{
			display: flex;
			padding: 36rpx 32rpx;
			flex-wrap: wrap;
			background-color: #fff;
			.appointment-hour-list-inner{
				width: 218rpx;
				height: 108rpx;
				box-sizing: border-box;
				border-radius: 8px;
				border: 1px solid rgba(0, 0, 0, 0.05);
				margin-right: 16rpx;
				margin-bottom: 24rpx;
				
				background: #F7F7F7;
				text-align: center;
				
				padding: 18rpx 9rpx;
				.appointment-hour-range{
					font-size: 26rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;

				}
				.appointment-hour-range2{
					font-size: 22rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #666666;
					padding-top: 4rpx;
				}
			}
			.appointment-hour-list-inner:nth-child(3n){
				margin-right: 0rpx;
			}
		}
		.selectService-service{
			height: 118rpx;
			display: flex;
			align-items: center;
			padding: 0rpx 32rpx;
			background-color: #FFFFFF;
			margin-top: 16rpx;
			.selectService-service-left{
				font-size: 32rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #333333;
				flex: 1;
			}
			.selectService-service-right{
				font-size: 32rpx;
				// font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #B2B2B2;
				display: flex;
				align-items: center;
				.picker-inner{
					display: flex;
					align-items: center;
				}
				image{
					width: 48rpx;
					height: 48rpx;
				}
			}
		}
		
		
		.selectService-bottom{
			position: fixed;
			bottom: 0rpx;
			background-color: #fff;
			width: 100vw;
			padding: 0rpx 32rpx;
			padding-bottom: calc(24rpx + env(safe-area-inset-bottom)/2);
			padding-top: 24rpx;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			.selectService-bottom-left{
				display: flex;
				flex: 1;
				.selectService-bottom-left-text1{
					font-size: 28rpx;
					// font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #333333;
				}
				.selectService-bottom-left-text2{
					font-size: 28rpx;
					font-family: PingFangSC-Semibold, PingFang SC;
					font-weight: 600;
					color: #FF413C;
				}
			}
			.selectService-bottom-button{
				width: 228rpx;
				height: 80rpx;
				background: #FFD300;
				border-radius: 48rpx;
				
				font-size: 28rpx;
				// font-family: PingFangSC-Semibold, PingFang SC;
				font-weight: 600;
				color: #111111;
				text-align: center;
				line-height: 80rpx;
			}
		}
	}
</style>
